import { Table, Icon, Divider, Tooltip, Popconfirm, Tag } from 'antd'
import React, { Component } from 'react'
import moment from 'moment'

import PreviewModal from '../common/preview-modal'
import { FormattedMessage } from 'react-intl'

export default class QuizzesTable extends Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false,
      quiz: {}
    }
  }

  showEditorPage (quizId) {
    this.props.onShowEditorPage(quizId)
  }

  previewPage (quiz) {
    this.setState({
      visible: true,
      quiz
    })
  }

  closeModal () {
    this.setState({
      visible: false,
      quiz: {}
    })
  }

  confirm (quizId) {
    this.props.onDeleteQuiz(quizId)
  }

  render () {
    const columns = [{
      title: <FormattedMessage id='题目ID' />,
      dataIndex: 'id',
      sorter: (a, b) => a.id - b.id
    }, {
      title: <FormattedMessage id='标题' />,
      dataIndex: 'remark',
      sorter: (a, b) => a.remark.length - b.remark.length,
      className: 'description-style'
    }, {
      title: <FormattedMessage id='标签' />,
      dataIndex: 'tags',
      sorter: (a, b) => a.tags.length - b.tags.length,
    }, {
      title: <FormattedMessage id='创建时间' />,
      dataIndex: 'createTime',
      render: (text) => <small>{text}</small>
    }, {
      title: <FormattedMessage id='创建者' />,
      dataIndex: 'maker',
      sorter: (a, b) => a.maker.length - b.maker.length
    }, {
      title: <FormattedMessage id='操作' />,
      key: 'action',
      render: (text, record) => (
        <span>
          <Tooltip placement='top' title={<FormattedMessage id='预览' />} overlay='preview'>
            <Icon type='eye' className='icon-style' onClick={this.previewPage.bind(this, record)} />
          </Tooltip>

          {this.props.disabledEdit
            ? ''
            : <span>
              <Divider type='vertical' />

              <Tooltip placement='top' title={<FormattedMessage id='编辑' />} overlay='edit'>
                <Icon type='edit' className='icon-style'
                  onClick={this.showEditorPage.bind(this, record.id)} />
              </Tooltip>
            </span>
          }
          <Divider type='vertical' />

          <Popconfirm title={<FormattedMessage id='确定删除吗?' />}
            onConfirm={this.confirm.bind(this, record.id)}
            okText={<FormattedMessage id='确定' />} cancelText={<FormattedMessage id='取消' />}>

            <Icon type='delete' className='icon-style' />
          </Popconfirm>
        </span>
      )
    }]

    const {visible, quiz} = this.state
    const quizzes = this.props.dataSource.map(quiz => {
      quiz.createTime = moment(quiz.createTime).format('YYYY-MM-DD')
      if (quiz.tags) {
        return Object.assign({}, quiz, {tags: quiz.tags.map(tag => <Tag key={tag.id}>{tag.name}</Tag>)})
      }
      return quiz
    })
    return (<div className={'table-style'}>
      <Table rowKey={record => record.id}
        columns={columns}
        dataSource={quizzes}
        pagination={this.props.pagination}
        bordered
        className='table-center' />
      {Object.keys(quiz).length === 0
        ? ''
        : <PreviewModal visible={visible}
          quiz={quiz}
          type={this.props.type}
          closeModal={this.closeModal.bind(this)}
        />}
    </div>)
  }
}
